<template>
    <el-form ref="form" :model="infoForm" label-width="80px">

        <el-divider>个人信息</el-divider>
        <div style="margin-top:4%"></div>
        <el-col :span="9">
            <el-form-item label="用户账号">
                <el-input v-model="infoForm.account" :disabled="true"></el-input>
            </el-form-item>
        </el-col>
        <el-col :span="9">
            <el-form-item label="用户昵称">
                <el-input v-model="infoForm.nickname"></el-input>
                <el-button class="changenickNameButton" @click="editNickName(infoForm.nickname)" type="warning" round
                    plain size="small">修改昵称</el-button>
            </el-form-item>
        </el-col>
        <el-col :span="5" :offset="1">
            <el-card :body-style="{ padding: '0px' }">
                <img class="mineHeader" :src="infoForm.avatar">
                <div class="editHeaderText">修改头像</div>
            </el-card>
        </el-col>

        <el-col :span="9">
            <el-form-item label="用户邮箱">
                <el-input placeholder="www.example@xx.com" v-model="infoForm.email" disabled></el-input>
                <!-- <el-button class="changeEmailButton" type="warning" round plain size="small">修改邮箱</el-button> -->
            </el-form-item>
        </el-col>
        <el-col :span="9">
            <el-form-item label="用户密码">
                <el-input placeholder="www.example@xx.com" value="*********" disabled></el-input>
                <el-button class="changePwdButton" @click="showDialog = true" type="warning" round plain size="small">
                    修改密码
                </el-button>
            </el-form-item>
        </el-col>
        <el-col :span="9">
            <el-form-item label="注册时间">
                {{ infoForm.createTime }}
            </el-form-item>
        </el-col>
        <el-col :span="9">
            <el-form-item label="最近登陆时间" label-width=auto>
                {{ infoForm.lastLogin }}
            </el-form-item>
        </el-col>

        <el-dialog title="修改密码" :visible.sync="showDialog" :rules="rules">
            <el-row :gutter="20">
                <el-col :span="9">
                    <el-form-item label="用户邮箱">
                        <el-input v-model="infoForm.email" disabled></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="9">
                    <el-form-item label="验证码">
                        <el-input v-model="editPasswordReq.emailCode"></el-input>
                    </el-form-item>
                </el-col>
                <el-button class="sendSmsButton" @click="sendEmail()" type="warning" round plain size="small">发送验证码
                </el-button>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="9">
                    <el-form-item label="新密码">
                        <el-input type="password" v-model="editPasswordReq.password"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showDialog = false">取 消</el-button>
                <el-button type="primary" @click="editPassword(editPasswordReq)">确 定</el-button>
            </div>
        </el-dialog>
    </el-form>

</template>

<script>
import { getUserInfo } from '@/api/user'
import { changeNickName } from '@/api/user'
import { sendEmailSms } from '@/api/user'
import { changePassword } from '@/api/user'
export default {
    name: "MineInfo",
    created() {
        this.getInfo()
    },
    data() {
        return {
            showDialog: false,
            infoForm: {
                account: '',
                avatar: '',
                nickname: '',
                email: '',
                createTime: '',
                lastLogin: '',
            },
            editUserReq: {
                nickName: ''
            },
            editPasswordReq: {
                password: '',
                emailCode: ''
            }
        }
    }, methods: {
        getInfo() {
            let that = this
            getUserInfo(this.$store.state.token).then((data => {
                this.infoForm = data.data
            })).catch(error => {
                that.$message({
                    type: 'error',
                    message: '个人信息获取失败!',
                    showClose: true
                })
            })
        },
        editNickName(newName) {
            let that = this
            let editNameReq = {
                nickName: newName
            }
            changeNickName(editNameReq).then((data => {
                that.$message({
                    message: '修改用户昵称成功！',
                    type: 'success',
                    showClose: true
                })
                setTimeout(() => {
                    location.reload()
                    that.$router.go('/mine')
                }, 2000)
            })).catch((error) => {
                if (error !== 'error') {
                    that.$message({
                        message: error,
                        type: 'error',
                        showClose: true
                    });
                }
            })
        },
        sendEmail() {
            let that = this
            sendEmailSms().then((data => {
                that.$message({
                    message: '发送邮箱验证码成功！',
                    type: 'success',
                    showClose: true
                })
            })).catch((error) => {
                if (error !== 'error') {
                    that.$message({
                        message: error,
                        type: 'error',
                        showClose: true
                    });
                }
            })

        },
        editPassword(editPasswordReq) {
            let that = this
            changePassword(editPasswordReq).then((data => {
                that.$message({
                    message: '修改密码成功！',
                    type: 'success',
                    showClose: true
                })
                setTimeout(() => {
                    location.reload()
                    that.$router.go('/mine')
                }, 2000)
            })).catch((error) => {
                if (error !== 'error') {
                    that.$message({
                        message: error,
                        type: 'error',
                        showClose: true
                    });
                }
            })

        }

    }
}
</script>

<style scoped>
.el-card {
    height: 140px;
    width: 140px;
    position: absolute;
}

.mineHeader {
    width: 140px;
    background-color: #5fb878;
}

.mineHeader:hover~.editHeaderText {
    visibility: visible;
}

.editHeaderText {
    background: rgba(0, 0, 0, 0.4);
    margin-top: -30px;
    text-align: center;
    color: rgb(255, 255, 255);
    width: 100%;
    height: auto;
    position: absolute;
    visibility: hidden;
}

.submitButton {
    float: right;
}

.changeEmailButton {
    margin-top: 5%;
    float: right;
}

.changePwdButton {
    margin-top: 5%;
    float: right;
}

.changenickNameButton {
    margin-top: 5%;
    float: right;
}

.sendSmsButton {
    margin-left: 3%;

}
</style>